<template>
    <div id="Login">
       <div class="loginFrom">
          <div class="loginFrom-t">
              <img :src="require('@/assets/img/logo.png')" alt="">
          </div>
          <div class="loginFrom-c">
              <el-form :model="loginForm" label-width="80px">
                <el-form-item>
                    <el-input v-model="loginForm.username">
                        <i slot="prefix" class="el-icon-user-solid"></i>
                    </el-input>
                </el-form-item>
                 <el-form-item>
                    <el-input v-model="loginForm.password" type="password">
                        <i slot="prefix" class="el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" >重置</el-button>
                </el-form-item>
              </el-form>
               
          </div>
       </div>
    </div>
</template>
<script>
import iconsvg from "../../icons/iconsvg.vue";
import {postLogin} from "@/api/login"
import {Message} from 'element-ui';
export default 
  {
     name:'Login',
     data() {
        return {
            loginForm:{
                username:'admin',
                password:'123456'
            }
        }
    },
    methods:{
         login(){
             let data=this.loginForm;
             //console.log(data);
             this.$store.dispatch('login/Acs_loginApi',data)
             .then(res=>{
                    //Message.success('登录成功');
                    this.$router.replace('/welcome');
                }
             );
         }
      
    },
    /* mounted(){
        console.log(server);
    }, */

    components: { iconsvg },

   /*  setup(prps,{root}){
        let a=reative({});
        let b=ref(123)
        const login=()=>{
            console.log(b.value)
        }
        return{
            login,
            a
        }
    } */
}
</script>
<style lang="scss" scoped>
    #Login{
        background-color: #2b4b6b;
        height: 100vh;
         position: relative;
        .loginFrom{
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 3px;
            width: 450px;
            height: 300px;
            background: #fff;
            padding: 110px 20px 0; 
            .loginFrom-t{
                position: absolute;
                top: -25%;
                left: 50%;
                transform: translateX(-50%);
                height: 130px;
                width: 130px;
                border-radius: 50%;
                background-color: #fff;
                padding: 10px;
                box-shadow: 0 0 10px #ddd;
                //overflow: hidden;
                img{
                     border-radius: 50%;
                    width: 100%;
                    height: 100%;
                    background-color: #eee;
                }
            }
            .loginFrom-c{
                ::v-deep .el-form-item__content{
                    margin-left:0!important;
                }
                .btns{
                    text-align: right;
                }
            }
        }
    }
</style>